<template>
	<view class="index">
		<view class="top">
			<text class="t2" :class="{ t1: zst == 1 }" @tap="setActive('jd')">接单</text>
			<text class="t2" :class="{ t1: map.status == 1 }" @tap="setMap('status', 1)">进行中
			<text class="newNub" v-if="driverCount>0">1</text>
			</text>
			<text class="t2" :class="{ t1: map.status == 99 }" @tap="setMap('status', 99)">已完成</text>
			<!-- <text class="t2" :class="{ t1: map.status == 4 }" @tap="setMap('status', 4)">待支付</text> -->
			<!-- <text class="icon" @tap="navigateTo('createOrder')">&#xe60e;</text> -->
		</view>
		<view class="center" v-if="zst===1" v-for="(v, i) in order.data" :key="i">
				<view class="xtpd" v-if="v.is_system_order===1">
					<view class="aa">
						<view class="dd_info">
							<view class="dd_info1">
				
								<view style="width: 40%;">
									<text class="icon" style="color: #5498F5;">&#xe608;</text>出发地
								</view>
								<view class="box123" style="width: 60%;">{{v.start}}</view>
							</view>
							<view class="dd_info2">
								<view style="width: 40%;">
									<text class="icon " style="color: transparent;">&#xe608;</text>
								</view>
								<view style="width: 60%;"></view>
							</view>
							<view class="dd_info3">
								<view style="width: 40%;">
									<text class="icon" style="color: #AFAFAF;">&#xe608;</text>目的地
								</view>
								<view class="box123" style="width: 60%;">{{v.end}}</view>
							</view>
						</view>
						<view class="person_info">
							<view>
								系
							</view>
				
						</view>
					</view>
					<view class="dd_btn">
						<!-- <view class="z_btn"><button>转单</button></view> -->
						<view class="j_btn" @click="taking(v.id)"><button>接单</button></view>
					</view>
					<view>
						<textarea
							style="background-color: #E4E4E4;border-radius: 15rpx;width: 96%;padding: 2%;margin-top: 1vh;height: 8vh;"
							name="" id="" placeholder="订单备注:"></textarea>
					</view>
				</view>
				<view class="orders" v-if="order.total > 0">
					
					<view class="qd" v-if="v.is_system_order!=1">
						<view class="bb">
							<view class="qd_info">
								<view class="qd_info1" style="text-align: center;font-size: 14px;" v-if="v.driver_number>1">
									<view style="width: 28%;;">
										订单编号:
									</view>
				
									<view class="" style="font-size: 27rpx;">
										{{ v.order_id }}
									</view>
								</view>
								<view class="qd_info1">
									<view style="width: 10%;position: absolute;top: -0.5vh;">
										<text class="icon" style="color: #5498F5;">&#xe608;</text>
									</view>
									<view class="" style="width: 90%; margin-left: 10%;">
										{{ v.start }}
									</view>
								</view>
								<view class="qd_info2">
									<view style="width: 40%;margin-left: 10%;">
				
									</view>
									<view style="width: 50%;"></view>
								</view>
								<view class="qd_info3">
									<view style="width: 10%;position: absolute;top: 0.2vh;">
										<text class="icon" style="color: #AFAFAF">&#xe608;</text>
									</view>
									<view class="" style="width: 90%; margin-left: 10%;">
										{{ v.end }}
									</view>
								</view>
							</view>
							<view class="person_info">
								<view v-if="v.driver_number>1">
									多
								</view>
								<view v-if="v.driver_number==1">
									单
								</view>
							</view>
						</view>
						<view class="q_btn">
							<button @tap="navigateTo('/pagesA/myDriving/drivingDetails?order_id=' + v.id)"
								id="xq_btn">详情</button>
							<button @click="taking(v.id) " class="qd_btn">抢单</button>
						</view>
					</view>
				</view>
			<!-- <view class="empty" v-if="order.total == 0">暂无订单</view> -->
		</view>
		
		
		<view class="center" v-if="zst===2" v-for="(v, i) in driverorder.data" :key="i">
			<!-- <view class="xtpd" v-if="v.is_system_order===1">
				<view class="aa">
					<view class="dd_info">
						<view class="dd_info1">

							<view style="width: 10%;position: absolute;top: -0.5vh;">
								<text class="icon" style="color: #5498F5;">&#xe608;</text>
							</view>
							<view class="" style="width: 90%; margin-left: 10%;">
								{{ v.start }}
							</view>
						</view>
						<view class="dd_info2">
							<view style="width: 40%;margin-left: 10%;">
											
							</view>
							<view style="width: 50%;"></view>
						</view>
						<view class="dd_info3">
							<view style="width: 10%;position: absolute;top: 0.2vh;">
								<text class="icon" style="color: #AFAFAF">&#xe608;</text>
							</view>
							<view class="" style="width: 90%; margin-left: 10%;">
								{{ v.end }}
							</view>
						</view>
					</view>
					<view class="person_info">
						<view>
							系
						</view>

					</view>
				</view>
				<view class="dd_btn">
					<view class="z_btn"><button>转单</button></view>
					<view class="j_btn" @tap="navigateTo('/pagesA/myDriving/drivingDetails?order_id=' + v.id)">
						<button>接单</button>
					</view>
				</view>

			</view> -->
			<view class="orders">


				<view class="qd">
					<view class="bb">
						<view class="qd_info">

							<view class="qd_info1">
								<view style="width: 10%;position: absolute;top: -0.5vh;">
									<text class="icon" style="color: #5498F5;">&#xe608;</text>
								</view>
								<view class="" style="width: 90%; margin-left: 10%;">
									{{ v.start }}
								</view>
							
							</view>
							<view class="qd_info2">
								<view style="width: 40%;margin-left: 10%;">
												
								</view>
								<view style="width: 50%;"></view>
							</view>
							<view class="qd_info3">
								<view style="width: 10%;position: absolute;top: 0.2vh;">
									<text class="icon" style="color: #AFAFAF">&#xe608;</text>
								</view>
								<view class="" style="width: 90%; margin-left: 10%;">
									{{ v.end}}
								</view>
							</view>
						</view>
						<view class="person_info">
							<view v-if="v.driver_number>1">
								多
							</view>
							<view v-if="v.driver_number==1">
								单
							</view>
						</view>
					</view>
					<!-- @tap="uni.reLaunch('/pagesA/myDriving/drivingDetails?order_id=' + v.id)" -->
					<view class="q_btn" @tap="backto(v.id)"
						style="width: 100%;"><button style="width: 100%;">点击查看</button></view>
				</view>
			</view>
			<!-- <view class="empty" v-if="order.total == 0">暂无订单</view> -->
		</view>

		<!-- <view class="center1" v-show="active == 'dj'"><rich-text :nodes="setting.notice"></rich-text></view> -->
		<!--   <view class="bottom">
      <view class="item active" @tap="navigateTo('/pages/myDriving/myDriving')">
        <text class="icon">&#xe606;</text>
        首页
      </view>
      <view class="item " @tap="navigateTo('/pages/myDriving/order')">
        <text class="icon">&#xe616;</text>
        订单
      </view>
      <view class="item " @tap="navigateTo('/pages/myDriving/withdraw')">
        <text class="icon">&#xe61c;</text>
        提现
      </view>
    </view> -->
	</view>
</template>

<script>
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	let timer = null;
	export default {
		data() {
			return {
				imagesURL: "",
				active: 'jd',
				setting: {},

				map: {
					status: 'all',
					type:"driver",
					page: 1
				},
				zst: 1,
				last_page:"",
				flag3: null,
				hour3: 0,
				order:"",
				minute3: 0,
				time3:"00:00:00",
				second3: 0,
				order: {},
				driverorder: {},
				auto_taking:'',
				driverCount:"",
				order_list1:''
				// isWorking: true
			};
		},
		onLoad() {
			// uni.showLoading({
			//                     title: '加载中'
			//                 });
			this.getInfo();
			
		},
		onShow() {
			this.getList();
			timer = setInterval(() =>{
				this.getList();
			}, 3000);
			this.getdriveorderco()
		},
		onUnload() {
			clearInterval(timer);
			console.log('清除');
		},
		onHide() {
			clearInterval(timer);
			console.log('清除');
		},
		filters: {
			date: value => {
				let date = new Date(value * 1000);
				let h = date.getHours();
				let m = date.getMinutes();
				return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m);
			}
		},
		methods: {
			setMap(key, value) {
				// uni.showLoading({
				//    title: '加载中'
				//  });
				this.zst = 2
				this.map[key] = value;
				this.map.page = 1;
				
				this.getdriveorder()
			},
			backto(value){
				uni.navigateTo({
					url:'/pagesA/myDriving/drivingDetails?order_id=' + value+ '&&auto_taking=' + this.auto_taking+'&&status=1'
				})
			},
			async taking(orderId) {
				if(this.driverCount>0){
					uni.showToast({
						title:"正在接单中，完成后在抢单",
						icon:'none',
						duration: 2000,
					})
					return false
				}
				// this.begin()
				this.daoda_time = true
				
				// uni.showModal({
				// 	title: '操作提示',
				// 	content: '请确认已到达出发地点等待用户',
					success: async e => {
						if (e.confirm) {
							// uni.showLoading({
							// 	title: '加载中'
							// });
				
							let res = await api.orderReach(this.orderId, this.photo);
							if (res.code == 1) {
								this.getOrderInfo();
								// uni.hideLoading();
								clearInterval(this.flag2)
								this.test_s = 0
								this.test_m = 0
								this.test_h = 0
								this.time = "00:00:00"
								uni.setStorage({
									key: 'ds',
									data: this.test_s,
									success: function(res) {}
								});
								uni.setStorage({
									key: 'dm',
									data: this.test_m,
									success: function(res) {}
								});
								uni.setStorage({
									key: 'dh',
									data: this.test_h,
									success: function(res) {}
								});
								uni.removeStorageSync('ds');
								uni.removeStorageSync('dm');
								uni.removeStorageSync('dh');
								uni.removeStorageSync('status');
								clearInterval(this.flag2)
								this.time = "00:00:00"
								uni.setStorage({
									key: 'qdtime',
									data: this.time,
									success: function(res) {}
								});
								this.begin()
							} else {
								helper.toast(res.msg);
							}
							uni.removeStorage({
								key:"qdtime"
							})
						}
					}
				//});
				uni.showModal({
					title: '操作提示',
					content: '确定要接单吗？',
					success: async e => {
						if (e.confirm) {
							let res = await api.orderTaking(orderId);
							let begin_time = true;
							helper.toast(res.msg);
							if (res.code == 1) {
								uni.navigateTo({
									url: '/pagesA/myDriving/drivingDetails?order_id=' + orderId + '&&begin_time='+ begin_time ,
								});
							}
						}
					}
				});
			},
			
			async getInfo() {
				let res = await api.getSetting();
				this.setting = res.data;
				// uni.hideLoading();
			},
			async getdriveorder() {
				let res = await api.getOrderList(this.map);
				this.driverorder = res.data;
				this.auto_taking = res.data.data[0].auto_taking
				
					
					uni.stopPullDownRefresh();
				    // uni.hideLoading();
				
				
				// console.log('???',res.data.data[0].auto_taking);
				
			},
			async getdriveorderco() {
				let res = await api.getOrderList({
					status: 1,
					type:"driver",
					page: 1
				},);
				this.driverCount = res.data.total;
				
				
				// console.log('???',res.data.data[0].auto_taking);
				
			},
			async getList() {
				let res = await api.getOrderTakingList(this.map);
				// console.log('sss',res.data);
				const userid = uni.getStorageSync('userid');
				let that = this
				that.order_list1 = res.data
				var dataList = []
				res.data.data.map((item, index) => {
					// console.log(item,'?');
					if(item.driver_id == 0 ){
						dataList.push(item)
					}
					else if(item.driver_id == userid){
						dataList.push(item)
					}
				})
				that.order_list1.data = dataList	
				this.order = that.order_list1
				uni.stopPullDownRefresh();
			},
			onPullDownRefresh() {
				this.map.page = 1;
				this.getList();
			},
			onReachBottom() {
				if (this.info.last_page > this.info.current_page) {
					this.getList();
				}
			},
			setActive(active) {
				this.zst = 1
				this.map.status = 5
				this.active = active;
				this.getList()
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			begin() {
				this.flag3 = setInterval(() => {
					this.second3 = this.second3 + 1;
					if (this.second3 >= 60) {
						this.second3 = 0;
						this.minute3 = this.minute3 + 1;
					}
			
					if (this.minute3 >= 60) {
						this.minute3 = 0;
						this.hour3 = this.hour3 + 1;
					}
					this.time3 =
						this.complZero(this.hour3) +
						":" +
						this.complZero(this.minute3) +
						":" +
						this.complZero(this.second3);
						console.log('begin',this.time3)
				}, 1000);
			},
			complZero(n) {
				return n < 10 ? "0" + n : "" + n;
			},
		}
		
	};
</script>

<style lang="scss" scoped>
	.xtpd {
		width: 90%;
		border-radius: 15rpx;
		height: 31vh;
		// DDCADE C4DAEC
		background: linear-gradient(#DDCADE, #C4DAEC);
		box-shadow: 1px 1px 1px 1px #eaeaea;
		margin-bottom: 25rpx;
		padding: 5%;
	}

	.qd {
		width: 90%;
		border-radius: 15rpx;
		height: 23vh;
		// DDCADE C4DAEC
		background-color: white;
		box-shadow: 1px 1px 1px 1px #eaeaea;
		margin-bottom: -30rpx;
		padding: 5%;
	}

	.dd_info {
		float: left;
		width: 80%;
	}

	.qd_info {
		float: left;
		width: 80%;
	}

	.person_info {
		width: 20%;
		text-align: center;
		float: left;

		view {
			margin: auto;
			color: white;
			width: 5vh;
			height: 5vh;
			line-height: 5vh;
			background-color: #F2632C;
			border-radius: 50%;
		}

	}

	.aa {
		width: 100%;
		height: 14vh;
	}

	.bb {
		width: 100%;
		height: 17vh;
	}

	.dd_info1 {
		font-size: 45rpx;
		font-weight: 800;
		width: 100%;
		height: 6vh;

		view {
			float: left;
		}
	}

	.qd_info1 {
		height: 4vh;
		position: relative;
		font-size: 35rpx;
		font-weight: 800;
		width: 100%;

		view {
			height: 100%;
			float: left;
			width: 50%;
		}
	}

	.dd_info2 {
		height: 4vh;
		width: 100%;

		view {
			float: left;
			font-size: 30rpx;
		}
	}

	.box123 {
		width: 220rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.dd_info3 {
		width: 100%;

		view {
			float: left;
			font-size: 30rpx;
		}
	}

	.qd_info2 {
		margin-top: 1vh;
		position: relative;
		width: 100%;
		height: 3vh;

		view {
			float: left;
			font-size: 30rpx;
		}
	}

	.qd_info3 {
		margin-top: 1vh;
		position: relative;
		height: 3vh;
		width: 100%;

		view {
			font-size: 30rpx;
			height: 4vh;
			line-height: 4vh;
			float: left;
		}
	}

	.dd_btn {
		width: 100%;
		height: 7vh;
		border-bottom: 1px solid #AFAFAF;
	}

	.z_btn {
		float: left;
		width: 27.5%;
		margin-right: 2.5%;

		button {
			width: 100%;
			height: 5vh;
			line-height: 5vh;
			border: 0;
			background-color: #FE973A;
			color: white;
			border-radius: 10rpx;
			font-size: 35rpx;
		}
	}

	.q_btn {
		width: 100%;
		margin-top: 1rem;
		display: flex;

		button {
			line-height: 5vh;
			font-size: 35rpx;
			width: 38%;
			height: 5vh;
			border: 0;
			background-color: #FA4F50;
			color: white;
			border-radius: 10rpx;
		}

		#xq_btn {
			background-color: #3194FF;
			width: 25%;
			margin-left: 20rpx;
		}

		.qd_btn {
			width: 50%;
			margin-left: 30rpx;
			// height: 6vh;
		}

	}

	.j_btn {
		margin-left: 5%;
		padding-top: 20rpx;
		// float: left;
		width: 90%;

		button {
			line-height: 5vh;
			font-size: 35rpx;
			width: 100%;
			height: 5vh;
			border: 0;
			background-color: #07C160;
			color: white;
			border-radius: 10rpx;
		}
	}

	.active {
		color: #32c45e !important;

		.icon {
			color: #32c45e !important;
		}
	}

	.empty {
		height: 100upx;
		line-height: 100upx;
		font-size: 26upx;
		text-align: center;
	}

	page,
	.index {
		height: 100%;
		background-color: #fbfbfb;
	}

	.center {
		padding: 30upx;
	}

	.center1 {
		padding: 30upx;
		font-size: 26upx;
		line-height: 48upx;
	}

	.top {
		display: flex;
		padding: 20upx;
		font-size: 28upx;
		background-color: #ffffff;

		.t1 {
			width: 48%;
			text-align: center;
			color: #3294FF;
		}

		.t2 {
			width: 48%;
			text-align: center;
			position: relative;
		}
		.newNub{
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			line-height: 30rpx;
			background-color: red;
			color: #fff;
			position: absolute;
		}
		// #t3:hover{
		//   color: #3294FF;
		// }
		.icon {
			font-size: 30upx;
		}
	}

	.orders {
		// margin-bottom: 30upx;
		display: flex;
		// padding: 20upx 10upx;
		// padding-right: 20upx;
		border-radius: 10upx;
		// box-shadow: 1px 1px 1px 1px #eaeaea;
		align-items: center;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		// background-color: #ffffff;
		.icon {
			text-align: center;
			font-size: 56upx;
		}

		.left {
			width: 80%;

			.input {
				width: 100%;
				padding: 6upx 0;
				display: flex;
				align-items: center;

				text {
					width: 20%;
				}

				.time {
					width: 70%;
					font-size: 25upx;
					color: #979797;
				}

				.address {
					width: 70%;
					font-size: 26upx;
				}
			}
		}

		.right {
			width: 20%;
			text-align: right;
			font-size: 34upx;
			color: #e51c23;

			button {
				float: right;
				width: 140upx;
				background-color: #32c45e;
				margin-top: 20upx;
				border-radius: 50upx;
				padding: 0 10upx;
				font-size: 22upx;
			}

			.price {
				float: right;
				position: relative;
				right: 20upx;
				font-size: 28rpx;
				width: 250upx;
			}
		}
	}

	.bottom {
		background-color: #ffffff;
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 120upx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24upx;
			width: 33.33%;

			.icon {
				font-size: 56upx;
				color: #999999;
			}
		}
	}

	// .active {
	//   color: #32c45e !important;
	//   .icon {
	//     color: #32c45e !important;
	//   }
	// }
</style>